<template>
	<tm-app ref="piglist">
		<navbar-module title="猪仔管理"/>
		<tabs-module :list="tabsTitle" @tabschange="tabschange"/>

		<view v-if="state === '0'">
			<view v-if="progress.length>0">
			<!-- <tm-scrolly :refresher="false" v-model="pull" v-model:bottom-value="bottomFresh" @refresh="refresh" @bottom="refreshBottom"> -->
				<tm-sheet :round="2" :shadow="2" v-for="item in progress" :key="item.id" :margin="[32,24]">
					<view class="flex flex-between" style="align-items: center;">
										<view class="flex flex-center">
											<i class="iconfont icon-zhu mr-15" style="font-size: 20px;color: #5a94f6;"/>
											<tm-text :label="`${item.name}`" class="text-weight-b" :fontSize="32"/>
										</view>
						<view>
							<tm-button :round="24" :margin="[6,0]" label="治疗" size="small" :fontSize="28" :height="50" :width="100" @click="gotoList('/pages/treatment/form/form')"/>
						</view>
					</view>
					<tm-divider/>
					<view class="flex flex-between flex-wrap" @click="gotoList(`/pages/piglet/form/form?state=1&data=${encodeURIComponent(JSON.stringify(item))}`)">
										<tm-text class="text" :label="`状态：${item.status.label}`" color="red" :fontSize="32"/>
						<tm-text class="text" :label="`猪仔品种：${item.breed?.name}`" color="red" :fontSize="32"/>
						<tm-text class="text" :label="`猪圈：${item.pigsty?.name?item.pigsty?.name:'暂无'}`" :fontSize="32"/>
										<tm-text class="text" :label="`喂养方式：${item.pigsty?.kind?.label}`" :fontSize="32"/>
						<view style="min-width: 36%;align-items: center;" class="flex">
											<tm-text class="text" :label="`入栏日龄：${item.pigLevel?.day} `" :fontSize="32"/>
											<tm-text label=" 天" color="grey" class="pl-4" :fontSize="32"/>
										</view>
										<view style="min-width: 36%;align-items: center;" class="flex">
											<tm-text class="text" :label="`预估体重：${item.pigLevel?.weight}`" :fontSize="32"/>
											<tm-text label="KG" color="grey" class="pl-4" :fontSize="32"/>
										</view>
					</view>
				</tm-sheet>
			<!-- </tm-scrolly> -->
			</view>
			<view v-else>
				<no-data :flag="loadFlag"/>
			</view>
		</view>


		<view v-else-if="state === '1'">
			<view v-if="compented.length>0">
			    <tm-sheet :round="2" v-for="item in compented" :key="item.id" :shadow="2" :margin="[32,10]" @click="gotoList('/pages/piglet/form/form?state=1')">
			    	<view class="flex flex-between" style="align-items: center;">
			    		<tm-text label="耳标编号:1232433255" class="text-weight-b"/>
			    		<view>
			    			<tm-tag text :shadow="0" color="grey" label="已出栏"/>
			    		</view>
			    	</view>
			    	<tm-divider/>
			    	<view class="flex flex-between flex-wrap">
			    		<tm-text style="min-width: 35%;" label="猪圈:森林猪圈"/>
			    		<tm-text style="min-width: 35%;" label="喂养人:张三"/>
			    		<tm-text style="min-width: 35%;" label="入圈时间:2022年2月3日"/>
			    		<tm-text style="min-width: 35%;" label="体重:20斤"/>
			    	</view>
			    </tm-sheet>
			</view>
			<view v-else>
				<no-data :flag="loadFlag"/>
			</view>
		</view>


	</tm-app>
</template>

<script setup lang="ts">
	import { onLoad } from "@dcloudio/uni-app";
	import { ref } from 'vue'
	import {getOneList} from '../../index/resource/http'

	const state = ref('0')
	const loadFlag = ref(false)
	const tabsTitle = ref([
		{ key: '0', title: '养殖中'},
		{ key: '1', title: '已出栏'},
	])
	
	const bottomFresh = ref(false)
	const pull = ref(false)
	

		onLoad(()=>{
			getData()
		})

		const progress = ref([])
		const compented = ref([])

		const getData = async () => {
			const {data} = await getOneList()
			data.forEach(item=>{
				// TODO 这状态分的对吗？要显示出来吗
				if(item.status.value=='WAIT'||item.status.value=='OUT'||item.status.value=='NORMAL'||item.status.value=='OTHER'){
					progress.value.push(item)
				}else{
					compented.value.push(item)
				}
			})
			
			loadFlag.value = true
		}

	const gotoList = (url) => {
		uni.navigateTo({
			url,
		})
	}

	const tabschange = (key) => {
		state.value = key
	}
	
	const refreshBottom = () => {
		bottomFresh.value = true
		
	}
	const refresh = () => {
		setTimeout(()=>{
			pull.value = false
		})
	}
	

</script>

<style lang="less">
</style>
